<html>
<head>
	<title>JavaScript Calendar - Demo</title>
	<meta name="description" content="Javascript popup date and time picker control (javascript calendar)">
	<meta name="keywords" content="JavaScript Calendar, javascript, html, client side, netscape, explorer, IE, calendar, pop, popup, timestamp, date, picker, database, control">
	<meta name="robots" content="index,follow">
<style>
	a, A:link, a:visited, a:active
		{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
	A:hover
		{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
	p, tr, td, ul, li
		{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
	ul, li
		{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; margin-left: 10px;}
	form
		{margin: 5px;}
	.header1, h1
		{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
	.header2, h2
		{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
	.intd
		{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}

</style>
<!-- European format dd-mm-yyyy -->
<script language="JavaScript" src="calendar1.js"></script><!-- Date only with year scrolling -->
<!-- American format mm/dd/yyyy -->
<script language="JavaScript" src="calendar2.js"></script><!-- Date only with year scrolling -->
</head>

<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" bgcolor="white">

<!-- Header -->
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
	<td width="350" rowspan="2"><img src="img/tc.gif" width="350" height="80" border="0" alt="Tigra Calendar"></td>
	<td align="right" valign="top"><img src="img/logo.gif" width="178" height="30" border="0" alt="Softcomplex logo"></td>
</tr>
<tr>
	<td align="right" valign="bottom" nowrap>
	<b>
	|&nbsp;<a href="http://www.softcomplex.com/index.html">About&nbsp;Us</a>&nbsp;
	|&nbsp;<a href="http://www.softcomplex.com/services.html">Services</a>&nbsp;
	|&nbsp;<a href="http://www.softcomplex.com/download.html">Download</a>&nbsp;
	|&nbsp;<a href="http://www.softcomplex.com/order.html">Order</a>&nbsp;
	|&nbsp;<a href="http://www.softcomplex.com/support.html">Support</a>&nbsp;
	|
	</b>
	</td>
</tr>
<tr><td><img src="img/pixel.gif" width="1" height="5" border="0"></td></tr>
</table>
<!-- /Header -->

<!-- Body -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4" width="100%"><tr><td>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
	<td class="header1" valign="top">Tigra Calendar - Demo #1</td>
	<td class="header1" valign="top" width="100%">&nbsp;</td>
</tr>
<tr>
	<td valign="top" bgcolor="#FFFFFF">
	<table cellpadding="3" cellspacing="1" border="0" width="100%">
	<tr><td class="header2">Notes</td></tr>
	<tr><td class="intd">On the right hand side there is a form with Tigra Calendars attached to the fields. Note, that you can have multiple calendars on the same page independently configurable.</td></tr>
	<tr><td><img src="img/pixel.gif" width="250" height="1" border="0"></td></tr>
	<tr><td class="header2">Advantages</td></tr>
	<tr>
		<td class="intd">
		<p><b>Easy date input</b> - With Tigra Calendar date input is simple and intuitive. Visitors can select any date from unlimited range with few clicks.
		<p><b>Cost Saving Component</b> - Don't waste your time coding date conversion and validation all over again for each new project. Get the dates on server side ready for further processing.
		<p><b>Professional Look</b> - Simple great looking improvement to the user interface of your web application.
		</td>
	</tr>
	<tr><td><img src="img/pixel.gif" width="1" height="1" border="0"></td></tr>
	<tr><td class="header2">Links</td></tr>
	<tr>
		<td class="intd">
		<b>
		<ul>
			<li><a href="http://www.softcomplex.com/products/tigra_calendar/">Product page</a>
			<li><a href="http://www.softcomplex.com/products/tigra_calendar/demo1.html">Demo Page</a>
			<li><a href="http://www.softcomplex.com/forum/forumdisplay_42/">Product forum</a>
			<li><a href="http://www.softcomplex.com/products/tigra_calendar_pro/">Tigra Calendar PRO</a>
		</ul>
		</b>
		</td>
	</tr>
	<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
	<tr><td class="header2"><a href="http://www.softcomplex.com/products/tigra_calendar_pro/">Tigra Calendar PRO</a> additionally offers:</td></tr>
	<tr>
		<td class="intd">
		<ul>
			<li>Date input/output formats library. Unable to find one you need? We'll code it for you at no additional charge!
			<li>Calendar look is configurable via CSS
			<li>Date limits are supported as either absolute date or relatively in days
			<li>Unlimited years scrolling with drop-down box
			<li>Configurable behavior on out of range date selection 
			<li>Free setup support, free product updates, discounts for other products
			<li>Inline, pop-up and modal mode versions of the calendar
		</ul>
		</td>
	</tr>
	<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
	<tr><td class="header2">Vote for the script</td></tr>
	<tr>
	<td class="intd" style="padding: 5px;">
	If you like the script, please vote for it. We do appreciate this much.
	<form action="http://www.scriptsearch.com/cgi-bin/rateit.cgi" method="post" target="_new">
	<input type="hidden" name="ID" value="3901">
	<a href="http://www.scriptsearch.com/details/3901.html"><b>ScriptSearch.com</b></a> :
	<select name="rate" size="1" style="font-size:10px;">
		<option value="5" selected>Excellent!</option>
		<option value="4">Very Good</option>
		<option value="3">Good</option>
		<option value="2">Fair</option>
		<option value="1">Poor</option>
	</select>&nbsp;<input type="submit" value="Vote!" style="font-size:10px;">
	</form>
	
	<form action="http://www.hotscripts.com/cgi-bin/rate.cgi" method="POST" target="_new">
	<input type=hidden name="ID" value="13844">
	<a href="http://www.hotscripts.com/Detailed/13844.html"><b>HotScripts.com</b></a> :
	<select name="rate" size="1" style="font-size:10px;">
		<option selected value="5">Excellent!</option>
		<option value="4">Very Good</option>
		<option value="3">Good</option>
		<option value="2">Fair</option>
		<option value="1">Poor</option>
	</select>&nbsp;<input type="submit" value="Rate It!" style="font-size:10px;">
	</form>
	</td>
	</tr>
	<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
	</table>
	</td>

	<td valign="top" bgcolor="#FFFFFF" align="center">
		<img src="img/pixel.gif" width="1" height="40" border="0"><br>
		<table cellpadding="0" cellspacing="0" width="450" border="0"><tr><td bgcolor="#4682B4">
		<table cellpadding="5" cellspacing="1" width="100%" border="0">
		<tr><th colspan="2" bgcolor="#DBEAF5"><font face="tahoma, verdana" size="2">Try out the script with this demo form</font></td></tr>
		<tr>
			<td bgcolor="#ffffff">European Date Format (dd-mm-yyyy)</td>
			<td bgcolor="#ffffff">American Date Format (mm/dd/yyyy)</td>
		</tr>
		<form name="tstest">
		<tr>
		<td bgcolor="#ffffff" valign="top">
			Select Date (w. year scrl.):<br>
			<input type="Text" name="input1" value="">
			<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
			Select Date (w/o year scrl.):<br>
			<input type="Text" name="input2" value="">
			<a href="javascript:cal2.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
			Select Timestamp (w. year scrl.):<br>
			<input type="Text" name="input3" value="">
			<a href="javascript:cal3.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
			Select Timestamp (w/o year scrl.):<br>
			<input type="Text" name="input4" value="">
			<a href="javascript:cal4.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
		</td>
		<td bgcolor="#ffffff">
			Select Date (w. year scrl.):<br>
			<input type="Text" name="input5" value="">
			<a href="javascript:cal5.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
			Select Date (w/o year scrl.):<br>
			<input type="Text" name="input6" value="">
			<a href="javascript:cal6.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
			Select Timestamp (w. year scrl.):<br>
			<input type="Text" name="input7" value="">
			<a href="javascript:cal7.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
			Select Timestamp (w/o year scrl.):<br>
			<input type="Text" name="input8" value="">
			<a href="javascript:cal8.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a><br>
		</td>
		</tr>
		</form>
		<script language="JavaScript">
		<!-- // create calendar object(s) just after form tag closed
			 // specify form element as the only parameter (document.forms['formname'].elements['inputname']);
			 // note: you can have as many calendar objects as you need for your application
			var cal1 = new calendar1(document.forms['tstest'].elements['input1']);
			cal1.year_scroll = true;
			cal1.time_comp = false;
			var cal2 = new calendar1(document.forms['tstest'].elements['input2']);
			cal2.year_scroll = false;
			cal2.time_comp = false;
			var cal3 = new calendar1(document.forms['tstest'].elements['input3']);
			cal3.year_scroll = true;
			cal3.time_comp = true;
			var cal4 = new calendar1(document.forms['tstest'].elements['input4']);
			cal4.year_scroll = false;
			cal4.time_comp = true;
			var cal5 = new calendar2(document.forms['tstest'].elements['input5']);
			cal5.year_scroll = true;
			cal5.time_comp = false;
			var cal6 = new calendar2(document.forms['tstest'].elements['input6']);
			cal6.year_scroll = false;
			cal6.time_comp = false;
			var cal7 = new calendar2(document.forms['tstest'].elements['input7']);
			cal7.year_scroll = true;
			cal7.time_comp = true;
			var cal8 = new calendar2(document.forms['tstest'].elements['input8']);
			cal8.year_scroll = false;
			cal8.time_comp = true;
		//-->
		</script>
		<tr><td colspan="2" bgcolor="#DBEAF5">&nbsp;</td></tr>
		</table>
		</td></tr></table>
	</td>
</tr>
</table>
</td></tr></table>
<!-- /Body -->

<!-- Footer -->
<table cellpadding="3" cellspacing="0" width="100%" border="0" height="22">
<tr bgcolor="#4682B4">
	<td nowrap><font color="white">Copyright &copy;2004 SoftComplex Inc. All rights reserved.</font></td>
	<td align="right">
	| <a href="http://www.softcomplex.com/"><font color="white">company info</font></a>
	| <a href="http://www.softcomplex.com/site_agreement.html"><font color="white">terms of service</font></a>
	| <a href="http://www.softcomplex.com/privacy_policy.html"><font color="white">privacy policy</font></a>
	|
	</td>
</tr>
</table>
<!-- /Footer -->

</body>
</html>
